<template>
    <div class="wrap">
        <!-- 头部 -->
        <div class="head">
            <!-- 头图 -->
            <img src="@/assets/imgs/platform/img_toptitle2_bground.png" alt=""/>
            <!-- 公司名称 -->
            <div class="cname">艺校通（北京）教育科技有限公司</div>
            <!-- 平台名称 -->
            <div class="ptname">艺校通智慧校园管理系统</div>
            <!-- 时间 -->
            <div class="toptime">{{ formattedCurrentTime }}</div>
        </div>
        <!-- 中部 -->
        <div class="middle">
            <!-- 中部统计 -->
            <div class="middle-top">
                <div class="middle-item">
                    <div class="title">平台运行天数</div>
                    <div class="num" style="color: rgba(46, 200, 237, 1)">
                        {{ middleTopData.pxyx }}
                    </div>
                </div>
                <div class="middle-item">
                    <div class="title">在线院校数量</div>
                    <div class="num" style="color: rgba(68, 213, 181, 1)">
                        {{ middleTopData.zxyx }}
                    </div>
                </div>
                <div class="middle-item">
                    <div class="title">在线琴房数量</div>
                    <div class="num" style="color: rgba(232, 126, 25, 1)">
                        {{ middleTopData.zxqf }}
                    </div>
                </div>
                <div class="middle-item">
                    <div class="title">用户总数</div>
                    <div class="num" style="color: rgba(180, 140, 255, 1)">
                        {{ middleTopData.zyh }}
                    </div>
                </div>
            </div>
            <!-- 地图 -->
            <div ref="middlemap" class="middle-map">
                <!-- <CenterMap class="contetn_center_top" title="设备分布图" /> -->
            </div>
            <!-- 用户数据 -->
            <div class="yhsj">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">用户数据</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="yhsj-box">
                    <div class="yhsj-l">
                        <div class="ls">
                            <div class="icon-b"></div>
                            <div class="text">教师用户数量</div>
                            <div class="num" style="color: rgba(10, 130, 255, 1)">
                                {{ userData.jsnum }}
                            </div>
                        </div>
                        <div class="ls">
                            <div class="icon-g"></div>
                            <div class="text">学生用户数量</div>
                            <div class="num" style="color: rgba(61, 237, 235, 1)">
                                {{ userData.xsnum }}
                            </div>
                        </div>
                        <div class="ls">
                            <div class="icon-p"></div>
                            <div class="text">毕业学生数量</div>
                            <div class="num" style="color: rgba(158, 44, 255, 1)">
                                {{ userData.bysnum }}
                            </div>
                        </div>
                    </div>
                    <div ref="yhsjchart" class="yhsj-r">
                        <!-- <chart class="yhsjrchart" :options="yhsjOption"></chart> -->
                    </div>
                    <div class="user-total">
                        用户总数 {{ userData.jsnum + userData.xsnum + userData.bysnum }}
                    </div>
                </div>
            </div>
            <!-- APP访客量 -->
            <div class="appfkl">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">APP访客量</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="appfkl-box">
                    <div class="biaozhi-list">
                        <div class="biaozhi">
                            <div class="iconb"></div>
                            <div class="name">PV</div>
                        </div>
                        <div class="biaozhi">
                            <div class="icong"></div>
                            <div class="name">UV</div>
                        </div>
                    </div>
                    <div ref="appfkchartl" class="appfkl-chart-l"></div>
                    <div ref="appfkchartr" class="appfkl-chart-r"></div>
                </div>
            </div>
            <!-- 院校所在地区数据 -->
            <div class="yxszdqsj">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">院校所在地区数据</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="yxszdqsj-box">
                    <div class="yxszdqsj-title">
                        <div class="item">地区</div>
                        <div class="item">院校数量</div>
                        <div class="item">琴房数量</div>
                        <div class="item">用户数量</div>
                    </div>
                    <div class="yxszdqsj-list">
                        <div class="item" v-for="item in yxszdqsjList" :key="item.province">
                            <div class="item-data">{{ item.province }}</div>
                            <div class="item-data">{{ item.schoolCount }}</div>
                            <div class="item-data">{{ item.roomCount }}</div>
                            <div class="item-data">{{ item.memberCount }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 院校数据排行榜 -->
            <div class="yxsjphb">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">院校数据排行榜</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="yxsjphb-box">
                    <div class="xh">序号</div>
                    <div class="mc">院校名称</div>
                    <div class="yxsjphb-list">
                        <div
                            class="yxsjphb-item"
                            v-for="(item, index) in yxsjphData"
                            :key="index"
                        >
                            <div class="index">{{ index + 1 }}</div>
                            <div class="name">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 练琴数据统计 -->
            <div class="lqsjtj">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">练琴数据统计</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div ref="lqsjtjchart" class="lqsjtj-box"></div>
                <div class="lqsjtj-total">
                    <div class="total-title">今日练琴数据：</div>
                    <div class="num">{{ lqsjtjData.total }}</div>
                    <div class="dw">分钟</div>
                </div>
            </div>
            <!-- 课程数据统计 -->
            <div class="kcsjtj">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">课程数据统计</div>
                    <div class="icon-r"></div>
                </div>
                <div class="lqsjtj-total">
                    <div class="total-title">今日课程数据：</div>
                    <div class="num">{{ kcsjtjData.total }}</div>
                    <div class="dw">节</div>
                </div>
                <!-- 统计内容 -->
                <div ref="kcsjtjchart" class="kcsjtj-box"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn"; // 引入中文语言包
import {chinaJson, chinaPData} from "./components/";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
import Highmaps from "highcharts/modules/map";
import {useModuleApi} from "@/api/yxt/dashboard";
import {map} from "lodash-es";
import {useSchoolApi} from "@/api/yxt/school";
import {getCurrentDays} from "@/utils";
import {app} from "@/config";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

const schoolApi = useSchoolApi();
const moduleApi = useModuleApi();

//中部顶部统计数据
const middleTopData = ref({
    pxyx: 0,
    zxyx: 0,
    zxqf: 0,
    zyh: 0,
});

//全国城市数据
const cityData = ref([]);

//APP访客量
const appfklData = ref({
    today: {
        uv: 1000,
        pv: 3000,
    },
    history: {
        uv: 1000,
        pv: 3000,
    },
});

// 用户数据
const userData = ref({
    jsnum: 0,
    xsnum: 0,
    bysnum: 0,
});

//院校所在地区数据
const yxszdqsjList = ref<Array<any>>([]);

//院校数据排行榜
const yxsjphData = ref<Array<any>>([]);

//练琴数据统计
const lqsjtjData = ref({
    times: [], //横坐标数据
    values: [], //纵坐标数据
    total: 0,
});

//课程数据统计
const kcsjtjData = ref({
    times: [], //横坐标数据
    values: [], //纵坐标数据
    total: 0,
});

// 当前时间
dayjs.locale("zh-cn"); // 设置Day.js的语言环境为中文
const formattedCurrentTime = ref(
    dayjs().format(`HH:mm:ss \u00A0ddd\u00A0 YYYY-MM-DD`)
);
const updateTime = () => {
    //13:06:58   星期一  2023-08-16
    formattedCurrentTime.value = dayjs().format(
        `HH:mm:ss \u00A0ddd\u00A0 YYYY-MM-DD`
    );
};

// 图表dom
const middlemap = ref(null);
const yhsjchart = ref(null);
const appfkchartl = ref(null);
const appfkchartr = ref(null);
const lqsjtjchart = ref(null);
const kcsjtjchart = ref(null);

//自适应
const screenHeight = ref(window.innerHeight);
const setRem = () => {
    const danwei = screenHeight.value / 1080;
    const html = document.querySelector("html");
    if (html) html.style.fontSize = danwei + "px";
};
let myMiddlemap;
const myMiddlemapInit = () => {
    echarts.registerMap("china", chinaJson as any);
    myMiddlemap = echarts.init(middlemap.value);
    myMiddlemap.setOption(myMiddlemapInitOption());
};
const myMiddlemapInitOption = () => {
    const data: any[] = [];
    if (cityData.value.length) {
        for (let i = 0; i < cityData.value.length; i++) {
            const cd: any = cityData.value[i];
            const pdata = chinaPData[cd.province];
            if (pdata && cd.province) {
                data.push({
                    name: cd.province,
                    value: [pdata[0], pdata[1], cd.count],
                });
            }
        }
    }
    return {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
            show: false,
        },
        legend: {
            show: false,
        },
        visualMap: {
            show: false,
            seriesIndex: 0,
            inRange: {
                // 渐变颜色，从小到大
                // FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
                // 1781B5,
                // 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
                color: [
                    // "#EDF7FD",
                    "rgba(237,247,253,.8)",
                    // "#B7E1F6",
                    "rgba(183,225,246,.9)",
                    // "#81CAEF",
                    "rgba(129,202,239,.9)",
                    // "#38ACE5",
                    "rgba(56,172,229,.9)",
                    // "#1781B5",
                    "rgba(23,129,181,.9)",
                    // "#105A7E",
                    "rgba(16,90,126,0.9)",
                ],
            },
            textStyle: {
                color: "#fff",
            },
        },
        geo: {
            map: "china",
            roam: false,
            selectedMode: false,
            zoom: 1.2,
            top: 45,
            show: false,
        },
        series: [
            {
                name: "MAP",
                type: "map",
                map: "china",
                tooltip: {
                    show: false,
                },
                data: [],
                roam: false,
                selectedMode: false,
                zoom: 1.2,
                geoIndex: 1,
                top: 45,
                label: {
                    show: false,
                    color: "#FFF",
                    fontSize: 8,
                    rich: {},
                },
                emphasis: {
                    show: false,
                },
                itemStyle: {
                    areaColor: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 1,
                                color: "rgba(2, 69, 163, .5)",
                            },
                        ],
                        globalCoord: false,
                    },
                    color: "rgba(2, 69, 163, 0)",
                    borderColor: "rgba(147, 235, 248, .8)",
                    shadowColor: "rgba(128, 217, 248, .3)",
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10,
                },
            },
            {
                data,
                type: "effectScatter",
                coordinateSystem: "geo",
                legendHoverLink: false,
                tooltip: {
                    show: false,
                    backgroundColor: "rgba(0,0,0,.6)",
                    borderColor: "rgba(147, 235, 248, .8)",
                    textStyle: {
                        color: "#FFF",
                    },
                },
                label: {
                    formatter: (param: any) => {
                        return param.name.slice(0, 3);
                    },
                    fontSize: 8,
                    position: "bottom",
                    textBorderColor: "#fff",
                    textShadowColor: "red",
                    textShadowBlur: 10,
                    textBorderWidth: 0,
                    color: "#FFF",
                    show: true,
                },
                itemStyle: {
                    color: "rgba(255, 247, 7, 1)",
                    borderColor: "rgba(255, 247, 7, 1)",
                    borderWidth: 0.5,
                },
            },
        ],
    };
};
const myMiddlemapupdate = () => {
    if (myMiddlemap) myMiddlemap.update(myMiddlemapInitOption());
};

//用户数据
let myYhsjchart;
const myYhsjchartinit = () => {
    myYhsjchart = new Highcharts.Chart(yhsjchart.value, myYhsjchartinitOption());
};
const myYhsjchartinitOption = () => {
    return {
        chart: {
            type: "pie",
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0,
            },
            marginLeft: 0,
            marginTop: 0,
            backgroundColor: "transparent",
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                depth: 25,
                dataLabels: {
                    enabled: false,
                    format: "{point.name}",
                    connectorWidth: 0, // 去掉引导线
                },
                startAngle: 300,
                borderWidth: 0,
                colors: [
                    // 自定义颜色数组
                    "rgba(6, 117, 233, 1)", //
                    "rgba(61, 237, 235, 1)", //
                    "rgba(129, 0, 239, 1)", //
                ],
            },
        },
        series: [
            {
                type: "pie",
                data: [
                    {
                        name: "教师用户数量",
                        y: userData.value.jsnum,
                        sliced: true, // 默认激活第一块
                        selected: true, // 默认激活第一块
                    },
                    {
                        name: "学生用户数量",
                        y: userData.value.xsnum,
                    },
                    {
                        name: "毕业学生数量",
                        y: userData.value.bysnum,
                    },
                ],
            },
        ],
        exporting: {enabled: false},
        credits: {enabled: false},
    };
};
const myYhsjchartupdate = () => {
    if (myYhsjchart) myYhsjchart.update(myYhsjchartinitOption());
};

// APP访问量
const gradientColor1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {offset: 0, color: "rgba(46, 200, 237, 1)"}, // 渐变色起始颜色
    {offset: 1, color: "rgba(25, 137, 250, 1)"}, // 渐变色结束颜色
]);
const gradientColor2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {offset: 0, color: "rgba(20, 178, 181, 1)"}, // 渐变色起始颜色
    {offset: 1, color: "rgba(68, 213, 181, 1)"}, // 渐变色结束颜色
]);
let myAppfkchartl;
const myAppfkchartlinit = () => {
    myAppfkchartl = echarts.init(appfkchartl.value);
    myAppfkchartl.setOption(myAppfkchartlinitOption());
};
const myAppfkchartlinitOption = () => {
    return {
        grid: {
            show: false,
            borderColor: "rgba(46, 200, 237, 0.80)",
            top: "20%",
            left: "20%",
            width: "65%",
            height: "60%",
        },
        xAxis: [
            {
                type: "category",
                axisTick: {show: false},
                data: ["今日访客量"],
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#FFF", // 设置横坐标文字颜色
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(35, 54, 93, 1)",
                    },
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(35, 54, 93, 1)",
                    },
                },
                splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                        color: "rgba(35, 54, 93, 1)", // 自定义网格线颜色
                    },
                },
            },
        ],
        series: [
            {
                name: "PV",
                type: "bar",
                data: [appfklData.value.today.pv],
                barWidth: 25, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(68, 213, 181, 1)",
                },
                itemStyle: {
                    color: gradientColor1, // 设置折线的横线颜色
                },
                barGap: "100%", // 调整PV和UV柱子之间的距离
            },
            {
                name: "UV",
                type: "bar",
                data: [appfklData.value.today.uv],
                barWidth: 25, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(68, 213, 181, 1)",
                },
                itemStyle: {
                    color: gradientColor2, // 设置折线的横线颜色
                },
                barGap: "100%", // 调整PV和UV柱子之间的距离
            },
        ],
    };
};
const myAppfkchartlUpdate = () => {
    myAppfkchartl.setOption(myAppfkchartlinitOption());
};
let myAppfkchartr;
const myAppfkchartrinit = () => {
    myAppfkchartr = echarts.init(appfkchartr.value);
    myAppfkchartr.setOption(myAppfkchartrinitOption());
};
const myAppfkchartrinitOption = () => {
    return {
        grid: {
            show: false,
            borderColor: "rgba(46, 200, 237, 0.80)",
            top: "20%",
            left: "20%",
            width: "65%",
            height: "60%",
        },
        xAxis: [
            {
                type: "category",
                axisTick: {show: false},
                data: ["历史访客量"],
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#FFF", // 设置横坐标文字颜色
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(35, 54, 93, 1)",
                    },
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(35, 54, 93, 1)",
                    },
                },
                splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                        color: "rgba(35, 54, 93, 1)", // 自定义网格线颜色
                    },
                },
            },
        ],
        series: [
            {
                name: "PV",
                type: "bar",
                data: [appfklData.value.history.pv],
                barWidth: 25, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(68, 213, 181, 1)",
                },
                itemStyle: {
                    color: gradientColor1, // 设置折线的横线颜色
                },
                barGap: "100%", // 调整PV和UV柱子之间的距离
            },
            {
                name: "UV",
                type: "bar",
                data: [appfklData.value.history.uv],
                barWidth: 25, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(68, 213, 181, 1)",
                },
                itemStyle: {
                    color: gradientColor2, // 设置折线的横线颜色
                },
                barGap: "100%", // 调整PV和UV柱子之间的距离
            },
        ],
    };
};
const myAppfkchartrUpdate = () => {
    myAppfkchartr.setOption(myAppfkchartrinitOption());
};

// 练琴数据统计
let myLqsjtjchart;
const myLqsjtjchartinit = () => {
    myLqsjtjchart = echarts.init(lqsjtjchart.value);
    myLqsjtjchart.setOption(myLqsjtjchartinitOption());
};
const myLqsjtjchartinitOption = () => {
    return {
        grid: {
            show: false,
            borderColor: "rgba(46, 200, 237, 0.80)",
            top: "10%",
            left: "8%",
            width: "88%",
            height: "70%",
        },
        xAxis: {
            type: "category",
            data: lqsjtjData.value.times,
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            show: true,
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            splitLine: {
                show: true, // 显示网格线
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)", // 自定义网格线颜色
                },
            },
        },
        series: [
            {
                data: lqsjtjData.value.values,
                type: "line",
                symbol: "circle", // 设置坐标点形状，可以是'circle'、'rect'、'triangle'等
                symbolSize: 6, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(25, 137, 250, 1)",
                },
                itemStyle: {
                    color: "#FFF", // 设置折线的横线颜色
                    borderColor: "rgba(25, 137, 250, 1)",
                },
            },
        ],
    };
};
const myLqsjtjchartUpdate = () => {
    if (myLqsjtjchart) myLqsjtjchart.setOption(myLqsjtjchartinitOption());
};

// 课程数据统计
let myKcsjtjchart;
const kcsjtjchartinit = () => {
    myKcsjtjchart = echarts.init(kcsjtjchart.value);
    myKcsjtjchart.setOption(kcsjtjchartinitOption());
};
const kcsjtjchartinitOption = () => {
    return {
        grid: {
            show: false,
            borderColor: "rgba(46, 200, 237, 0.80)",
            top: "10%",
            left: "8%",
            width: "88%",
            height: "70%",
        },
        xAxis: {
            type: "category",
            data: kcsjtjData.value.times,
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            show: true,
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            splitLine: {
                show: true, // 显示网格线
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)", // 自定义网格线颜色
                },
            },
        },
        series: [
            {
                data: kcsjtjData.value.values,
                type: "line",
                symbol: "circle", // 设置坐标点形状，可以是'circle'、'rect'、'triangle'等
                symbolSize: 6, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(250, 220, 25, 1)",
                },
                itemStyle: {
                    color: "#FFF", // 设置折线的横线颜色
                    borderColor: "rgba(250, 220, 25, 1)",
                },
            },
        ],
    };
};
const kcsjtjchartUpdate = () => {
    myKcsjtjchart.setOption(kcsjtjchartinitOption());
};

// 更新
watch(
    userData,
    () => {
        myYhsjchartupdate();
    },
    {deep: true}
);
watch(
    appfklData,
    () => {
        myAppfkchartrUpdate();
        myAppfkchartlUpdate();
    },
    {deep: true}
);
watch(
    lqsjtjData,
    () => {
        myLqsjtjchartUpdate();
    },
    {deep: true}
);
watch(
    kcsjtjData,
    () => {
        kcsjtjchartUpdate();
    },
    {deep: true}
);
watch(cityData, () => {
    myMiddlemapupdate();
});
onMounted(() => {
    // 每秒更新一次时间
    setInterval(updateTime, 1000);

    //动态适配
    window.addEventListener("resize", setRem);
    setRem();

    dataInit();
    setInterval(dataInit, 1000 * 60 * 10);

    setTimeout(() => {
        // 图表初始化
        myMiddlemapInit();
        myYhsjchartinit();
        myAppfkchartlinit();
        myAppfkchartrinit();
        myLqsjtjchartinit();
        kcsjtjchartinit();
    }, 500);
});

const dataInit = () => {
    // 基础数据
    getBaseCount();
    // 学校排行榜数据
    getYxsjphData();
    // 院校所在地区数据
    getYxszdqsjList();
    // 练琴数据统计 + 课程数据统计
    getDataStats();
    // 获取学校地图分布数据
    getMapData();
};

async function getBaseCount() {
    moduleApi.getBaseCount().then((resp: any) => {
        // 用户数据
        userData.value.xsnum = resp.stuMember; // 学生
        userData.value.jsnum = resp.teaMember; // 教师
        userData.value.bysnum = resp.graduateMember; // 毕业生
        // 基础信息
        middleTopData.value.pxyx = getCurrentDays(app.create); // 平台运行天数
        middleTopData.value.zxyx = resp.schoolCount; // 在线院校
        middleTopData.value.zxqf = resp.roomCount; // 在线琴房
        middleTopData.value.zyh = resp.totalMember; // 总用户
    });
}

async function getYxsjphData() {
    moduleApi.getSchoolRank().then((resp: any) => {
        yxsjphData.value = resp;
    });
}

async function getYxszdqsjList() {
    moduleApi.getSchByPro().then((resp: any) => {
        yxszdqsjList.value = resp;
    })
}

async function getDataStats() {
    moduleApi.getDataStats().then((resp: any) => {
        // 练琴数据统计
        const subscribe = resp.subscribe;
        lqsjtjData.value.total = subscribe.total;
        lqsjtjData.value.times = <any>map(subscribe.list, "date");
        lqsjtjData.value.values = <any>map(subscribe.list, "value");

        // 课程数据统计
        const course = resp.course;
        kcsjtjData.value.total = course.total;
        kcsjtjData.value.times = <any>map(course.list, "date");
        kcsjtjData.value.values = <any>map(course.list, "value");
    });
}

async function getMapData() {
    schoolApi.getMapData().then((res) => {
        cityData.value = res;
    });
}

onUnmounted(() => {
    window.removeEventListener("resize", setRem);
    dispose();
});

// 数字格式化
// const commafy = (num) => {
//     if (num) {
//         const parts = num.toString().split('.');
//         parts[0] = parts[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
//         return parts.join('.');
//     }
//     return num;
// };

// 销毁图表
const dispose = () => {
    console.log("销毁...");
    myMiddlemap.dispose();
    myYhsjchart.destroy();
    myAppfkchartl.dispose();
    myAppfkchartr.dispose();
    myLqsjtjchart.dispose();
    myKcsjtjchart.dispose();
};
</script>
<style lang="scss" scoped>
::v-deep {
    html {
        font-size: calc(100vh / 1080);
    }
}

.wrap {
    width: 100%;
    height: 1080rem;
    user-select: none;
    color: #ffffff;
    background: #0f1630;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #707070;
    font-size: 24rem;
    position: relative;
    background-image: url("@/assets/imgs/sjkb/img_bground.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
        width: 1850rem;
        height: 84rem;
        position: absolute;
        top: 5rem;
        left: calc(50% - 925rem);

        .ptname {
            width: 300rem;
            height: 28rem;
            font-size: 26rem;
            font-weight: bold;
            color: #2ec8ed;
            line-height: 28rem;
            text-align: center;
            position: absolute;
            top: 30rem;
            left: calc(50% - 150rem);
        }

        .toptime {
            height: 20rem;
            font-size: 20rem;
            color: rgba(255, 255, 255, 1);
            line-height: 20rem;
            position: absolute;
            top: 32rem;
            right: 40rem;
        }

        .cname {
            height: 20rem;
            font-size: 20rem;
            color: rgba(255, 255, 255, 1);
            line-height: 20rem;
            position: absolute;
            top: 32rem;
            left: 40rem;
        }
    }

    .middle {
        width: 1888rem;
        height: 996rem;
        position: absolute;
        top: 72rem;
        left: calc(50% - 944rem);
        background-image: url("@/assets/imgs/platform/img_bground.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .middle-top {
            width: 700rem;
            height: 84rem;
            position: absolute;
            top: 47rem;
            left: calc(50% - 350rem);
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-between;

            .middle-item {
                width: 160rem;
                height: 84rem;
                background-image: url("@/assets/imgs/platform/img_middle_top_item.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: relative;

                .title {
                    width: 94%;
                    height: 14rem;
                    color: rgba(255, 255, 255, 0.8);
                    font-size: 14rem;
                    line-height: 14rem;
                    text-align: center;
                    position: absolute;
                    top: 21rem;
                    right: 0;
                }

                .num {
                    width: 94%;
                    height: 30rem;
                    font-size: 30rem;
                    line-height: 30rem;
                    text-align: center;
                    position: absolute;
                    top: 46rem;
                    right: 0;
                }
            }
        }

        .middle-map {
            width: 696rem;
            height: 533rem;
            position: absolute;
            top: 164rem;
            left: calc(50% - 348rem);
        }

        .yhsj {
            width: 532rem;
            height: 304rem;
            position: absolute;
            top: 47rem;
            left: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .yhsj-box {
                width: 100%;
                height: 260rem;
                position: absolute;
                bottom: 2rem;

                .yhsj-l {
                    width: 160rem;
                    position: absolute;
                    top: 66rem;
                    left: 67rem;
                    display: flex;
                    flex-flow: column nowrap;

                    .ls {
                        width: 100%;
                        height: 22rem;
                        display: flex;
                        flex-flow: row nowrap;
                        align-items: center;
                        margin-bottom: 33rem;

                        .icon-b {
                            width: 12rem;
                            height: 12rem;
                            border-radius: 50%;
                            background: #0675e9;
                            box-shadow: 0rem 0rem 6rem 1rem #6ab4ff;
                            opacity: 1;
                        }

                        .icon-g {
                            width: 12rem;
                            height: 12rem;
                            border-radius: 50%;
                            background: #3dedeb;
                            box-shadow: 0rem 0rem 6rem 1rem #3dedeb;
                            opacity: 1;
                        }

                        .icon-p {
                            width: 12rem;
                            height: 12rem;
                            border-radius: 50%;
                            background: #8100ef;
                            box-shadow: 0rem 0rem 6rem 1rem #8100ef;
                            opacity: 1;
                        }

                        .text {
                            height: 13rem;
                            font-size: 13rem;
                            line-height: 13rem;
                            margin-left: 8rem;
                        }

                        .num {
                            height: 22rem;
                            font-size: 13rem;
                            line-height: 22rem;
                            margin-left: 5rem;
                        }
                    }
                }

                .yhsj-r {
                    width: 260rem;
                    height: 260rem;
                    position: absolute;
                    top: -10rem;
                    right: 10rem;

                    .yhsjrchart {
                        width: 230rem;
                        height: 230rem;
                    }
                }

                .user-total {
                    width: 260rem;
                    height: 14rem;
                    font-size: 14rem;
                    line-height: 14rem;
                    text-align: right;
                    position: absolute;
                    bottom: 24rem;
                    right: 100rem;
                }
            }
        }

        .appfkl {
            width: 532rem;
            height: 268rem;
            position: absolute;
            top: 47rem;
            right: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .appfkl-box {
                width: 100%;
                height: 226rem;
                position: absolute;
                top: 42rem;
                display: flex;
                flex-flow: row nowrap;

                .biaozhi-list {
                    width: 200rem;
                    height: 22rem;
                    position: absolute;
                    top: 11rem;
                    right: 38rem;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    justify-content: flex-end;

                    .biaozhi {
                        height: 22rem;
                        display: flex;
                        flex-flow: row nowrap;
                        align-items: center;
                        margin-left: 28rem;
                        justify-content: flex-end;

                        .name {
                            height: 17rem;
                            font-size: 17rem;
                            line-height: 17rem;
                            margin-left: 8rem;
                        }

                        .iconb {
                            width: 18rem;
                            height: 10rem;
                            background: linear-gradient(270deg, #2ec8ed 0%, #1989fa 100%);
                            border-radius: 0px 0px 0px;
                            opacity: 1;
                        }

                        .icong {
                            width: 18rem;
                            height: 10rem;
                            background: linear-gradient(86deg, #14b2b5 0%, #44d5b5 100%);
                            border-radius: 0px 0px 0px;
                            opacity: 1;
                        }
                    }
                }

                .appfkl-chart-l {
                    width: 50%;
                    height: 226rem;
                }

                .appfkl-chart-r {
                    width: 50%;
                    height: 226rem;
                }
            }
        }

        .yxszdqsj {
            width: 532rem;
            height: 326rem;
            position: absolute;
            top: 371rem;
            left: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .yxszdqsj-box {
                width: 488rem;
                height: 206rem;
                position: absolute;
                top: 56rem;
                left: 22rem;

                .yxszdqsj-title {
                    width: 100%;
                    height: 22rem;
                    display: flex;
                    flex-flow: row nowrap;
                    background: rgba(46, 200, 237, 0.12);

                    .item {
                        width: 25%;
                        height: 100%;
                        font-size: 14rem;
                        color: #2ec8ed;
                        line-height: 22rem;
                        text-align: center;
                    }
                }

                .yxszdqsj-list {
                    width: 100%;
                    height: 226rem;
                    margin-top: 20rem;
                    display: flex;
                    flex-flow: column nowrap;
                    overflow: auto;

                    .item {
                        width: 100%;
                        height: 14rem;
                        font-size: 14rem;
                        line-height: 14rem;
                        display: flex;
                        flex-flow: row nowrap;
                        margin-bottom: 20rem;

                        .item-data {
                            flex: 1;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .yxsjphb {
            width: 532rem;
            height: 372rem;
            position: absolute;
            top: 325rem;
            right: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .yxsjphb-box {
                width: 100%;
                height: 310rem;
                position: absolute;
                top: 64rem;

                .xh {
                    width: 36rem;
                    height: 15rem;
                    font-size: 15rem;
                    text-align: center;
                    line-height: 15rem;
                    position: absolute;
                    top: 8rem;
                    left: 84rem;
                }

                .mc {
                    width: 80rem;
                    height: 15rem;
                    font-size: 15rem;
                    text-align: center;
                    line-height: 15rem;
                    position: absolute;
                    top: 8rem;
                    left: 273rem;
                }

                .yxsjphb-list {
                    width: 363rem;
                    height: 260rem;
                    position: absolute;
                    top: 20rem;
                    left: 85rem;
                    display: flex;
                    flex-flow: column nowrap;
                    margin-top: 21rem;
                    overflow: auto;

                    .yxsjphb-item {
                        width: 100%;
                        height: 34rem;
                        display: flex;
                        flex-flow: row nowrap;
                        margin-bottom: 18rem;
                    }

                    .index {
                        width: 34rem;
                        height: 34rem;
                        background-image: url("@/assets/imgs/platform/img_circle@2x.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        text-align: center;
                    }

                    .name {
                        width: 280rem;
                        height: 34rem;
                        font-size: 15rem;
                        line-height: 34rem;
                        background-image: url("@/assets/imgs/platform/img_name_bground@2x.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        margin-left: 49rem;
                        text-align: center;
                    }
                }
            }
        }

        .lqsjtj {
            width: 890rem;
            height: 244rem;
            position: absolute;
            top: 717rem;
            left: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .lqsjtj-box {
                width: 100%;
                height: 200rem;
                position: absolute;
                top: 44rem;
                left: 0;
            }
        }

        .lqsjtj-total {
            height: 22rem;
            position: absolute;
            top: 22rem;
            right: 20rem;
            display: flex;
            align-items: baseline;

            .total-title {
                height: 14rem;
                font-size: 14rem;
                line-height: 14rem;
                color: #fff;
            }

            .num {
                height: 22rem;
                font-size: 22rem;
                line-height: 22rem;
                color: rgba(46, 200, 237, 1);
            }

            .dw {
                height: 14rem;
                color: rgba(46, 200, 237, 1);
                font-size: 14rem;
                line-height: 14rem;
            }
        }

        .kcsjtj {
            width: 890rem;
            height: 244rem;
            position: absolute;
            top: 717rem;
            right: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .kcsjtj-box {
                width: 100%;
                height: 200rem;
                position: absolute;
                top: 44rem;
                left: 0;
            }
        }

        .tj-top {
            width: 100%;
            height: 22rem;
            position: absolute;
            top: 22rem;
            left: 0rem;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;

            .icon {
                width: 4rem;
                height: 14rem;
                margin-left: 22rem;
                background: #2ec8ed;
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
            }

            .title {
                height: 18rem;
                margin-left: 8rem;
                font-size: 18rem;
                font-weight: bold;
                color: #2ec8ed;
                line-height: 18rem;
            }

            .icon-r {
                flex: 1;
                max-width: 434rem;
                height: 14rem;
                margin-top: 4rem;
                margin-left: 8rem;
                margin-right: 22rem;
                background-image: url("@/assets/imgs/sjkb/img_title_decoration@2x.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }
    }

    img {
        width: 100%;
        height: 100%;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }
}
</style>
